
import BaseView from "./baseView.js";

export default class shouye extends BaseView {
    //添加css样式
    renderCss() {
        $("head").append('<link rel="stylesheet" type="text/css" href="css/shouye.css"><link rel="stylesheet" type="text/css" href="css/reset.css">')
    }
    //渲染框架结构
    render() {
        this.$el.html(`
        <!-- 头部 -->
        <header>
            <nav class="H-nav layout">
                <div class="layout H-left-div">
                    <a href="#/homepages" class="aa">
                        <p class="log">
                            <span class="text">猫眼电影</span>
                            <span class="beijin"></span>
                            <span class="faguang"></span>
                        </p>
                    </a>
                    <div class="layout">
                    <span>成都
                    <ol>
                        <li class="layout">
                            <span>区:</span><a href="">武侯</a><a href="">郫都</a><a href="">双流</a><a href="">金牛</a>
                        </li>
                    </ol>
                </span>
                    </div>
                    <ul class="layout H-link">
                        <li class="layout">
                            <a href="#/homepages">首页</a>
                        </li>
                        <li class="layout">
                            <a href="#/movies">电影</a>
                        </li>
                        <li class="layout">
                            <a href="#/yingyuans">影院</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">榜单</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">热点</a>
                        </li>
                    </ul>
                </div>
                <div class="H-right-div layout">
                    <form action="">
                        <input type="text" placeholder="找影视剧、影人、影院">
                    </form>
                    <div class="register">
                        <div>
                            <div class="yuan">
                                <div class="you">
                                </div>
                                <div class="zhongjian">
                                    <p>
                                        <a href="#/logins">登录</a>
                                        <a href="#/dingdans">我的订单</a>
                                    </p>
                                </div>
                                <div class="zuo">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        <!-- 轮播图 slideshow -->
        <section class="slideshow">
            <div class="slideshow-T layout">
            <img src="./img/lunbo1.jpg" alt="">
            <img src="./img/lunbo2.jpg" alt="">
            <img src="./img/lunbo3.jpg" alt="">
            <img src="./img/lunbo4.jpg" alt="">
            <img src="./img/lunbo5.jpg" alt="">
            <img src="./img/lunbo6.jpg" alt="">
            <img src="./img/lunbo1.jpg" alt="">
            </div>
            <div class="slideshow-B">
                <ul class="layout layout3">
                    
                </ul>
            </div>
        </section>
        <!-- 内容 -->
        <main class="layout">
            <!-- 左边 -->
            <article>
                <!-- 热映 -->
                <section class="hot-showing">
                    <nav class="layout">
                        <h1>正在热映（<span>55</span>部）</h1>
                        <a href="#/movies">全部</a>
                    </nav>
                    <div>
                        <ul class="move-top layout">

                        </ul>
                    </div>
                </section>
                <!-- 即将上映 -->
                <section class="coming-soon">
                    <nav class="layout">
                        <h1>即将上映（<span>55</span>部）</h1>
                        <a href="#/movies">全部</a>
                    </nav>
                    <ul class="layout layout1">
                        
                    </ul>
                </section>
                <!-- 热播 -->
                <section class="hot-broadcast">
                    <nav class="layout">
                        <h1>即将上映（<span>55</span>部）
                            <a href="">爱情</a>
                            <a href="">喜剧</a>
                            <a href="">动作</a>
                            <a href="">恐怖</a>
                            <a href="">动画</a>
                        </h1>
                        <a href="#/movies">全部</a>
                    </nav>
                    <ul class="layout layout2">
                        
                    </ul>
                </section>
            </article>
            <!-- 右边 -->
            <aside>
                <div class="day-ticket">
                    <h1>今日票房</h1>
                    <ol class="today">

                    </ol>
                </div>
                <div class="information">
                    <ul class="layout">
                        <li>今日大典</li>
                        <li>
                            <p><span>1.03</span>亿</p>
                            <p>北京时间<span>22:46:26</span></p>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">查看更多</a>
                            <p>猫眼专业版实时数据</p>
                        </li>
                    </ul>
                </div>
                <div class="expect">
                    <nav class="layout">
                        <h1>最受期待</h1>
                        <a href="javascript:;">查看完整榜单</a>
                    </nav>
                    <ul class="expect1">

                    </ul>
                </div>
                <div class="top">
                    <nav class="layout">
                        <h1>TOP100</h1>
                        <a href="javascript:;">查看完整榜单</a>
                    </nav>
                    <ul class="today">

                    </ul>
                </div>
            </aside>
        </main>
        <!-- 底部 -->
        <footer>
            <nav>
                <ul class="layout">
                     <li>
                        <a href="#/homepages">关于我们</a>
                    </li>
                    <li>
                        <a href="#/homepages">管理团队</a>
                    </li>
                    <li>
                        <a href="#/homepages">投资者关系</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团网</a>
                    </li>
                    <li>
                        <a href="#/homepages">格瓦拉</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团下载</a>
                    </li>
                </ul>
            </nav>
            <p>商务合作邮箱：v@maoyan.com客服电话：10105335违法和不良信息举报电话：4006018900</p>
            <p>北京猫眼文化传媒有限公司</p>
        </footer>
    `)
    }
    handle() {
        //渲染正在热映
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let str = "";
                data.forEach((item) => {
                    str += `<li data-movieid=${item._id}><img src="http://127.0.0.1:4000/photos/${item.images[0]}" alt="" style="height: 220px;width: 160px"><p><a href="">购票</a></p></li>`
                });
                $(".move-top").html(str)
            }
        })
        $(".move-top").on("click", "li", function () {
            window.location.hash = `#/moviederails?${this.dataset.movieid}`
        })
        //渲染即将上映
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let str = "";
                data.forEach((item) => {
                    str += ` <li data-movieid=${item._id}>
                    <span>
                        <img src="http://127.0.0.1:4000/photos/${item.images[0]}" alt="" style="height: 220px;width: 160px">
                    </span>
                    <div>
                        <p><span>134</span>人想看</p>
                        <a href="">预售片</a><a href="">预售</a>
                    </div>
                    <p>10月26日上映</p>
                </li>`
                });
                $(".layout1").html(str)
            }
        })
        $(".layout1").on("click", "li", function () {
            window.location.hash = `#/moviederails?${this.dataset.movieid}`
        })
        //渲染即将上映
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let str = "";
                data.forEach((item) => {
                    str += `<li data-movieid=${item._id}>
                    <img src="http://127.0.0.1:4000/photos/${item.images[0]}" alt="" style="height: 220px;width: 160px">
                </li>`
                });
                $(".layout2").html(str)
                $(".layout2>li:last-child").remove();
                $(".layout2>li:first-child>img").css({ "height": "220px", "width": "350px" });
            }
        })
        $(".layout2").on("click", "li", function () {
            window.location.hash = `#/moviederails?${this.dataset.movieid}`
        })
        //渲染轮播下面的小图
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let str = "";
                data.forEach((item) => {
                    str += `<li data-movieid=${item._id}>
                    <img src="http://127.0.0.1:4000/photos/${item.images[0]}" alt="" style="height: 113px;width: 163px">
                </li>`
                });
                $(".layout3").html(str);
                $(".layout3>li:last-child").remove();
                $(".layout3>li:last-child").remove();
            }
        })
        $(".layout3").on("click", "li", function () {
            window.location.hash = `#/moviederails?${this.dataset.movieid}`
        })
        //渲染轮播图
        // $.ajax({
        //     type: "post",
        //     url: "/api/platoon/getallmovie",
        //     dataType: "json",
        //     success(data) {
        //         let str = "";
        //         data.forEach((item) => {
        //             str += `
        //             <img src="http://127.0.0.1:4000/photos/${item.images[0]}" alt="" style="height: 400px;width: 1600px">
        //         `
        //         });
        //         $(".slideshow-T").html(str);
        //     }
        // })
        //渲染今日票房 top100
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let str = ""
                str = `
                <li data-movieid=${data[0]._id}>
                  <div class="layout" style="padding:0px">
                    <img src="http://127.0.0.1:4000/photos/${data[0].images[0]}" alt="" style="height: 80px;width: 120px">
                    <div>
                        <p>${data[0].cname}</p>
                        <span>5203.28万</span>
                    </div>
                  </div>
                </li>
                `
                let data1 = data.slice(1);
                let number = 2
                data1.forEach((item) => {
                    str += `
                    <li class="layout" data-movieid=${item._id}>
                    <span><i>${number++}</i>&nbsp;&nbsp;&nbsp;&nbsp;${item.cname}</span><span>2023.35万</span>
                </li>
                    `
                });
                $(".today").html(str);
            }
        })
        $(".today").on("click", "li", function () {
            window.location.hash = `#/moviederails?${this.dataset.movieid}`
        })
        // 渲染最受期待
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let str = "";
                str = `
               <li class="layout" data-movieid=${data[0]._id}>
               <img src="http://127.0.0.1:4000/photos/${data[0].images[0]}" alt="三生三世十里桃花" style="height: 194px;width: 138px">
               <div>
                   <p>${data[0].cname}</p>
                   <p>上映时间:<span>${data[0].upDate}</span></p>
                   <p><span>212184</span>人想看</p>
               </div>
               </li>
               <li class="layout" data-movieid=${data[0]._id}>
               <div>
                   <img src="http://127.0.0.1:4000/photos/${data[1].images[0]}" alt="奇异博士" style="height:118px;width: 170px">
                   <p>${data[1].cname}</p>
                   <p><span>212184</span>人想看</p>
               </div>
               <div>
                   <img src="http://127.0.0.1:4000/photos/${data[2].images[0]}" alt="奇异博士" style="height:118px;width:170px">
                   <p>${data[2].cname}</p>
                   <p><span>212184</span>人想看</p>
               </div>
               </li>
               `
                let data1 = data.slice(3);
                let number = 4
                data1.forEach((item) => {
                    str += `
                    <li class="layout" data-movieid=${item._id}>
                            <span><i>${number++}</i>&nbsp;&nbsp;${item.cname}</span> <span>2023.35万</span>
                    </li>
                    `   
               })              
               $(".expect1").html(str);
            }
        })
        $(".expect1").on("click", "li", function () {
            window.location.hash = `#/moviederails?${this.dataset.movieid}`
        })
    }
}